<template>
  <div class="user">
    <div class="head">
      <img src="@/assets/images/Man.jpg" />
      <div class="container">
        <div>{{ username }}</div>
      </div>
    </div>
    <div class="main">
      <div class="function">功能展示</div>
      <div class="same" @click="changePW">修改密码</div>
      <div class="same" @click="deleteAccount">注销账号</div>
    </div>
    <div class="foot">
      <van-button round block type="primary" @click="onLogout">退出登录</van-button>
    </div>
  </div>
  <van-dialog v-model:show="isShow" title="注册" ref="formRef">
    <van-form @submit="onUpdate">
      <van-cell-group inset>
        <van-field
          v-model.trim="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="rules.username"
          disabled
        />
        <van-field
          v-model.trim="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="rules.password"
        />
      </van-cell-group>
      <div style="margin: 16px; display: flex; justify-content: space-around">
        <van-button round type="primary" block native-type="submit" style="margin-left: 16px">
          修改密码
        </van-button>
      </div>
    </van-form>
  </van-dialog>
  <TabBar></TabBar>
</template>

<script setup>
import TabBar from '@/Components/TabBar/TabBar.vue'
import { useUser } from '@/views/User/Hooks/useUser.js'
const { formRef, isShow, username, password, rules, changePW, deleteAccount, onLogout, onUpdate } =
  useUser()
</script>

<style scoped>
.user {
  height: 100%;
  width: 100%;
  background: #f7f8fa;
}
.user .head {
  display: flex;
  margin: 10px;
  border-radius: 10px;
  padding: 10px;
  max-height: 200px;
  box-shadow: 0 8px 12px #ebedf0;
  background-color: #fff;
}
.user .head .container {
  margin: 20px 20px 20px 30px;
  font-weight: 600;
  font-size: 25px;
}
.user .head img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.user .main {
  margin: 10px;
  border-radius: 10px;
  padding: 10px;
  min-height: 100px;
  box-shadow: 0 8px 12px #ebedf0;
  background-color: #fff;
}
.user .main div {
  border-radius: 10px;
  padding: 10px;
}
.user .main .function {
  font-size: 30px;
}
.user .main .same {
  margin: 30px 10px;
  font-size: 20px;
  font-weight: 600;
  background: #eee;
}
.user .main .same:hover {
  background: skyblue;
  box-shadow: 0 0 5px rgb(140, 137, 137);
}
.user .foot {
  margin: 10px;
}
</style>
